<template>
  <div class="content">
    <div class="pagetop">
      <el-button type="primary" style="margin-left:30px;">返回</el-button>
      <el-button type="primary" >新建排期</el-button>
    </div>
    <div class="searchlist">
      <div class="searchitem">
        <div class="searchname">排期时间</div>
         <el-date-picker
      v-model="value1"
      type="daterange"
      style="width:300px;"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
      </div>
       <div class="searchitem">
        <div class="searchname">版本</div>
         <el-input style="width:300px;margin-right:30px;"></el-input>
         <el-button type="primary" >搜索</el-button>
      </div>
    </div>
    <div class="schedlue">
      <div class="schedlueitem" v-for="i in 3" :key="i">
        <div class="lefts">
          <img src="../../assets/404_images/404.png"/>
        </div>
        <div class="center">
          <div class="centeritem">
            CCTV1:重庆、昆明、太原
          </div>
          <div class="centeritem">
            上刊日期：2018.1.1-2018.1.31
          </div>
          <div class="centeritem">
            上刊版本：Coca-Cola Revives and Sustains（可口可乐，唤醒活力，持久畅快
          </div>
          <div class="centeritem">
            原计划日期：
          </div>
          <div class="centeritem">
            原计划版本：清凉一夏


          </div>
          <div class="centeritem">
           变更原因
          </div>
        </div>
        <div class="right">
          <el-button type="text">变更</el-button>
          <el-button type="text">删除</el-button>
          <el-button type="text">变更日志</el-button>
        </div>
      </div>
    </div>
    <div class="saves"><el-button type="primary" style="margin-left:30px;">提交审核</el-button>
      <el-button type="primary" >暂存</el-button></div>
  </div>
</template>
<script>
export default {
  
}
</script>
<style lang="scss" scope>
  .pagetop{
    height: 60px;
    width: 97%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
  }
  .searchlist{
    width: 97%;
    margin: 0 auto;
    .searchitem{
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .searchname{
        width: 100px;
      }
    }
  }
  .schedlue{
    width: 90%;
    margin: 0 auto;
    .schedlueitem{
      margin-top: 10px;

      display: flex;
      align-items: center;
      height: 130px;
      border-bottom: 1px solid #dcdfe6;
      .lefts{
        width: 120px;
        height: 100%;
        margin-right: 30px;
        margin-bottom: 5px;
        img{
          width: 120px;
          height: 100%;
        }
      }
      .center{
        flex: 1;
         margin-bottom: 5px;
        .centeritem{
          line-height: 22px;
          font-size: 14px;
        }
      }
      .right{
         margin-bottom: 5px;
        width: 200px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
    }
  }
  .saves{
    width: 300px;
    float: right;
    display: flex;
    justify-content: space-around;
    margin-right: 5%;
    margin-top: 20px;
  }
</style>